<template>
  <div class="page">
    <avue-crud
      :data="data"
      :option="option"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @search-change="searchChange"
    ></avue-crud>
  </div>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      data: [],
      option: {
        column: [
          {
            label: `名称`,
            prop: `value`,
            search: true,
          },
          // {
          //   label: `所属分类`,
          //   prop: `propertyId`,
          //   type: `select`,
          //   props: {
          //     label: `name`,
          //     value: `id`,
          //   },
          //   dicUrl: `${config.baseApi}/property`,
          // },
          // {
          //   label: `是否默认选择`,
          //   prop: `is_default`,
          // },
        ],
      },
    }
  },
  async created() {
    this.refreshChange()
  },
  methods: {
    async refreshChange() {
      this.data = await this.$http.instance.get(`/propertyValues`)
    },
    async searchChange(params, done) {
      this.data = await this.$http.instance.get(
        `/propertyValues?q=${params.value}`
      )
      console.log(params)
      setTimeout(() => {
        done()
      }, 500)
    },
    async rowSave(form, done, loading) {
      await this.$http.instance.post(`/propertyValues`, form)
      done(form)
    },
    async rowDel(form, index, done) {
      await this.$http.instance.delete(`/propertyValues/${form.id}`)
      done(form)
    },
    async rowUpdate(form, index, done, loading) {
      await this.$http.instance.patch(`/propertyValues/${form.id}`, form)
      done(form)
    },
  },
}
</script>
